{% extends  'base.html' %}
{% block head_quote %}
<link rel="stylesheet" href="https://img.ztm.me/weixin/css/amazeui.min.css">
<link rel="stylesheet" href="https://img.ztm.me/weixin/css/wap.css">
<style>
    .headimg {
        width:50px;
        height:50px;
        max-width:50px;
        max-height:50px;
        border-radius:50px;
    }
</style>
{% endblock head_quote %}
{% block content %}
<div class="pet_mian" >
    <div class="pet_head">
        <header data-am-widget="header" class="am-header am-header-default pet_head_block">
            <div class="am-header-left am-header-nav ">
                <a href="#left-link" class="iconfont pet_head_jt_ico">&#xe601;</a>
            </div>
            <div class="pet_news_list_tag_name">{{ user_profile.nickname }}</div>
            <div class="am-header-right am-header-nav">
                <a href="javascript:;" class="iconfont pet_head_gd_ico">&#xe600;</a>
            </div>
        </header>
    </div>
    <div class="pet_more_list">
        <div class="pet_more_list_block">
            <div class="iconfont pet_more_close">×</div>
            <div class="pet_more_list_block">
                <div class="pet_more_list_block_name">
                    <div class="pet_more_list_block_name_title">阅读 Read</div>
                    <a class="pet_more_list_block_line"> <i class="iconfont pet_nav_xinxianshi pet_more_list_block_line_ico">&#xe61e;</i>
                        <div class="pet_more_list_block_line_font">新鲜事</div>
                    </a>
                    <a class="pet_more_list_block_line"> <i class="iconfont pet_nav_zhangzhishi pet_more_list_block_line_ico">&#xe607;</i>
                        <div class="pet_more_list_block_line_font">趣闻</div>
                    </a>
                    <a class="pet_more_list_block_line">
                        <i class="iconfont pet_nav_kantuya pet_more_list_block_line_ico">&#xe62c;</i>
                        <div class="pet_more_list_block_line_font">阅读</div>
                    </a>
                    <a class="pet_more_list_block_line">
                        <i class="iconfont pet_nav_mengzhuanti pet_more_list_block_line_ico">&#xe622;</i>
                        <div class="pet_more_list_block_line_font">专题</div>
                    </a>
                    <a class="pet_more_list_block_line">
                        <i class="iconfont pet_nav_bk pet_more_list_block_line_ico">&#xe629;</i>
                        <div class="pet_more_list_block_line_font">订阅</div>
                    </a>
                    <a class="pet_more_list_block_line">
                        <i class="iconfont pet_nav_wd pet_more_list_block_line_ico">&#xe602;</i>
                        <div class="pet_more_list_block_line_font">专栏</div>
                    </a>
                    <div class="pet_more_list_block_name_title pet_more_list_block_line_height">服务 Service</div>
                    <a class="pet_more_list_block_line">
                        <i class="iconfont pet_nav_xinxianshi pet_more_list_block_line_ico">&#xe61e;</i>
                        <div class="pet_more_list_block_line_font">新鲜事</div>
                    </a>
                    <a class="pet_more_list_block_line">
                        <i class="iconfont pet_nav_zhangzhishi pet_more_list_block_line_ico">&#xe607;</i>
                        <div class="pet_more_list_block_line_font">趣闻</div>
                    </a>
                    <a class="pet_more_list_block_line">
                        <i class="iconfont pet_nav_kantuya pet_more_list_block_line_ico">&#xe62c;</i>
                        <div class="pet_more_list_block_line_font">阅读</div>
                    </a>
                    <a class="pet_more_list_block_line">
                        <i class="iconfont pet_nav_mengzhuanti pet_more_list_block_line_ico">&#xe622;</i>
                        <div class="pet_more_list_block_line_font">专题</div>
                    </a>
                    <a class="pet_more_list_block_line">
                        <i class="iconfont pet_nav_bk pet_more_list_block_line_ico">&#xe629;</i>
                        <div class="pet_more_list_block_line_font">订阅</div>
                    </a>
                    <a class="pet_more_list_block_line">
                        <i class="iconfont pet_nav_wd pet_more_list_block_line_ico">&#xe602;</i>
                        <div class="pet_more_list_block_line_font">专栏</div>
                    </a>
                </div>
            </div>
        </div>
    </div>
    <div class="pet_content pet_content_list">
        <div class="pet_grzx">
            <div class="pet_grzx_nr">
                <div class="pet_grzx_ico">
                    <img src="{{ user_profile.headimgurl }}" alt="{{ user_profile.nickname }}">
                </div>
                <div class="pet_grzx_name">{{ user_profile.nickname }}</div>
                <div class="pet_grzx_map">{{  user_profile.city }}</div>
                <!--
                <div class="pet_grzx_num_font">
  我坐在水屋下边的平台看着大海，吹着海风，真的是太喜欢了。夜晚有好多小白鲨鱼，好多种鱼。
                </div>-->
                <div class="pet_grzx_num">
                  <span>{{ user_profile.point }}<i>积分</i></span>
                  <span>{{ follower|length }}<i>推荐人数</i></span>
                  <span>0<i>粉丝</i></span>
                </div>
            </div>
        </div>
        <div class="pet_article_like">
          <div class="pet_content_main pet_article_like_delete">
            <div data-am-widget="list_news" class="am-list-news am-list-news-default am-no-layout">
              <div class="am-list-news-bd">
                <h3>邀请用户记录</h3>
                <ul class="am-list">
                {% for item in follower %}
                  <li class="am-g am-list-item-desced am-list-item-thumbed am-list-item-thumb-right pet_hd_list">
                    <a href="javascript:;" class="pet_hd_block">
                      <div class="pet_hd_block_title">
                          <img class="headimg" src="{{ item.headimgurl }}" alt="{{ item.nickname }}" />
                          <span>{{ item.nickname }}</span>
                          <span class="pet_hd_block_tag">[{{ item.subscribe_time }}]</span>
                    </div>
                    </a>
                  </li>
                {% endfor %}
                </ul>
              </div>
            </div>
          </div>
        </div>
        <!---->
        <div class="pet_article_like">
          <div class="pet_content_main pet_article_like_delete">
            <div data-am-widget="list_news" class="am-list-news am-list-news-default am-no-layout">
              <div class="am-list-news-bd">
                <h3>商品推荐记录</h3>
                <ul class="am-list">
                {% for item in user_share_list %}
                  <li class="am-g am-list-item-desced am-list-item-thumbed am-list-item-thumb-right pet_hd_list">
                    <a href="javascript:;" class="pet_hd_block">
                      <div class="pet_hd_block_title">
                        <div style="color: gray;font-size: 16px;">{{ item.goods_item }}</div>
                          {% for share in item.share_members.all %}
                          <div style="font-size: 14px;"> - {{share.create_at}} <u>{{ share.user.profile.nickname }}</u>查看</div>
                          {% endfor %}
                    </div>
                    </a>
                  </li>
                {% endfor %}
                </ul>
              </div>
            </div>
          </div>
        </div>
    </div>
{% block footer %}

<div class="pet_article_dowload pet_dowload_more_top_off">
    <div class="pet_article_dowload_title">关于我们</div>
    <div class="pet_article_dowload_content pet_dowload_more_top_bg"><div class="pet_article_dowload_triangle pet_dowload_more_top_san"></div>
    <div class="pet_article_dowload_ico"><img src="https://img.ztm.me/weixin/img/footdon.png" alt=""></div>
    <div class="pet_article_dowload_content_font">我们是...</div>
</div>
    <div class="pet_article_footer_info">Copyright(c)2017 All Rights Reserved</div>
</div>

{% endblock footer %}
</div>

<script src="https://img.ztm.me/weixin/js/jquery.min.js"></script>
<script src="https://img.ztm.me/weixin/js/amazeui.min.js"></script>
<script>
    $(function(){
        // 动态计算新闻列表文字样式
        auto_resize();
        $(window).resize(function() {
            auto_resize();
        });
        $('.am-list-thumb img').load(function(){
            auto_resize();
        });
        $('.pet_article_like li:last-child').css('border','none');
            function auto_resize(){
                $('.pet_list_one_nr').height($('.pet_list_one_img').height());
                    // alert($('.pet_list_one_nr').height());
            }
            $('.pet_article_user').on('click',function(){
                if($('.pet_article_user_info_tab').hasClass('pet_article_user_info_tab_show')){
                    $('.pet_article_user_info_tab').removeClass('pet_article_user_info_tab_show').addClass('pet_article_user_info_tab_cloes');
                }else{
                    $('.pet_article_user_info_tab').removeClass('pet_article_user_info_tab_cloes').addClass('pet_article_user_info_tab_show');
                }
            });
            $('.pet_head_gd_ico').on('click',function(){
                $('.pet_more_list').addClass('pet_more_list_show');
            });
            $('.pet_more_close').on('click',function(){
                $('.pet_more_list').removeClass('pet_more_list_show');
            });
    });
</script>

{% block footer_js %}
{% endblock footer_js %}
{% endblock content %}